<template>
  <div>
     <div class="shoplist" >
       <div class="shopitem"v-for="item in goodslist" :key="item.id" @click="getshopinfo(item.id)">
          <img :src="item.img_url" alt="">
          <h1>{{item.title}}</h1>
          <div class="info">
            <p class="price">
              <span class="new">￥{{item.market_price}}</span>
              <span class="old"><del>￥{{item.sell_price}}</del> </span>
            </p>
            <p class="hot">
              <span>热卖中</span>
              <span>剩余{{item.stock_quantity}}件</span>
            </p>
          </div>
       </div>
     </div>
      
      <!-- 加载更多 -->
      <!-- 
      1.绑定点击事件
      2.pageindex +1
      3.调用getgoods（）方法 -->
      <mt-button type="danger" size="large" @click="getmore" >加载更多</mt-button>
  </div>
</template>


<script>
export default {
  data(){
    return {
      pageindex:1,//默认第一页数据
      goodslist:[],//存放商品数据
    }
  },
  created(){
    this.getgoods()
  },
  methods:{
    getgoods(){//获取所有商品列表
      this.$http.get("api/getgoods?pageindex="+this.pageindex).then(result =>{
        if(result.body.status===0){
          this.goodslist=this.goodslist.concat(result.body.message)
        }
      })
    },
    getmore(){//点击加载更多
      this.pageindex ++
      this.getgoods()
    },
    getshopinfo(id){//点击获取商品详情
      //console.log(id)
      this.$router.push("/home/shopinfo/"+id)
    }
  },
  //props:["id"]
}
</script>


<style lang="less" scoped >
.shoplist{
  padding:6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .shopitem{
    margin:3px 0;
    width:49%;
    border:1px solid #ccc;
    box-shadow: 0 0 6px #ccc;
    padding:2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    h1{
      font-size: 14px;
    }
    img{
      width:100%;
   
    }
    .info{
      background-color: #ccc;
      p{
        margin:0;
      }
      .price{
        .new{
          color:red;
          font-size:16px;
          font-weight:bold;
          font-style:italic;
        }
        .old{
          margin-left:10px;

        }
      }
      .hot{
        display: flex;
        justify-content: space-between;
        font-size: 12px;
      }
    }
  }
}
</style>
